<template>
  <div class="place">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(page,index) in pages" :key="index">
        <div class="kong">
          <div class="ico-igm border-bottom">
            <div class="someplace" v-for="item in page" :key="item.id">
               <a href="">
                   <div class="mp-category-img-container"><img :src="item.imgurl"></div>
                   <p class="keyword">{{ item.keyword }}</p>
               </a>
            </div>
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <ul class="mp-listitem-con border-bottom">
      <li>
        <span class="iconfont">&#xe614;</span>定位失败
      </li>
      <li class="border-left">
         <span class="iconfont">&#xe718;</span>必游榜单
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Place',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  },
  computed: {
    pages () {
      let arr = []
      this.list.forEach((obj, index) => {
        let page = Math.floor(index / 8)
        if (!arr[page]) {
          arr[page] = []
        }
        arr[page].push(obj)
      })
      return arr
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .place
   padding-top 0.2rem
   .ico-igm
    height 0rem
    padding-bottom 3.7rem
    overflow hidden
   .someplace
    float left
    width 25%
    height 1.6rem
    text-align center
.mp-category-img-container
 display inline-block
 width 1.1rem
 height 1.1rem
 text-align center
img
 display inline-block
 width 100%
.keyword
 margin-top 0.1rem
 color #212121
 font-size 0.28rem
.place >>> .swiper-pagination-bullet-active
 background rgba(0,175,190,.8)
.place >>> .swiper-pagination-bullet
 width 0.12rem
 height 0.12rem
.mp-listitem-con
 width 100%
 height 0.98rem
 background-color #fff
 li
  height 0.98rem
  line-height 0.98rem
  color #212121
  text-align center
  font-size 0.28rem
  float left
  width 50%
  span
    margin-right .05rem
    color #616161
    font-size .32rem
    position relative
    top .01rem
</style>
